<template>
  <!-- 查询 -->
  <el-form :inline="true" :model="frontendData.queryData">
    <el-form-item label="姓名">
      <el-input v-model="frontendData.queryData.name" />
    </el-form-item>
    <el-form-item label="交易类型">
      <el-select v-model="frontendData.queryData.trascType" placeholder=" ">
        <el-option label="收入" value="收入" />
        <el-option label="支出" value="支出" />
      </el-select>
    </el-form-item>
    <el-form-item label="交易时间">
      <el-date-picker
        v-model="frontendData.queryData.trascTm"
        type="daterange"
        value-format="YYYY-MM-DD"
        range-separator="To"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
    </el-form-item>
  </el-form>
  <el-form>
    <el-form-item>
      <el-button type="primary" @click="reqGetTrascList">查询</el-button>
      <el-button plain @click="resetInput">重置</el-button>
      <el-button type="primary" @click="addBoxSwitch = true"
        >新增交易</el-button
      >
    </el-form-item>
  </el-form>

  <!-- 交易列表 -->
  <el-table
    :data="backendData.listData"
    style="width: 100%"
    :header-cell-style="{ 'text-align': 'center', background: '#fafafa' }"
    :cell-style="{ 'text-align': 'center' }"
  >
    <el-table-column prop="trascFlowNum" label="交易流水号" width="auto" />
    <el-table-column prop="name" label="姓名" width="auto" />
    <el-table-column prop="trascType" label="交易类型" width="auto" />
    <el-table-column prop="money" label="金额" width="auto" />
    <el-table-column prop="event" label="事件" width="auto" />
    <el-table-column fixed="right" label="操作" width="auto">
      <template v-slot="scope">
        <el-button
          type="primary"
          link
          @click="reqGetTrascDtl(scope.row.trascFlowNum, scope.row.name)"
          >详情</el-button
        >
        <el-button
          type="primary"
          link
          @click="reqDeleteTrasc(scope.row.trascFlowNum)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <!-- 新增交易流水 -->
  <el-dialog
    v-model="addBoxSwitch"
    title="新增交易流水"
    :show-close="false"
    center
  >
    <el-form :inline="false" :model="frontendData.addData">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名:">
            <el-input
              v-model="frontendData.addData.name"
              placeholder="请输入姓名"
              style="width: auto"
            />
          </el-form-item>
          <el-form-item label="金额:">
            <el-input
              v-model="frontendData.addData.money"
              placeholder="请输入交易金额"
              style="width: auto"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="交易类型:">
            <el-select
              v-model="frontendData.addData.trascType"
              placeholder="请选择交易类型"
              style="width: auto"
            >
              <el-option label="收入" value="收入" />
              <el-option label="支出" value="支出" />
            </el-select>
          </el-form-item>
          <el-form-item label="事件:">
            <el-input
              type="textarea"
              v-model="frontendData.addData.event"
              maxlength="200"
              placeholder="请输入发生交易的事件"
              style="width: auto"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addBoxSwitch = false">取消</el-button>
        <el-button type="primary" @click="reqAddTrasc">提交</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 修改交易流水 -->
  <el-dialog
    v-model="updBoxSwitch"
    :title="property.dialogTitle"
    :show-close="false"
    center
  >
    <el-form :inline="false" :model="backendData.dtlData">
      <el-row>
        <el-col :span="12">
          <el-form-item label="交易流水号:">
            <el-input
              v-model="backendData.dtlData.trascFlowNum"
              :value="backendData.dtlData.trascFlowNum"
              style="width: auto"
              :disabled="true"
            />
          </el-form-item>
          <el-form-item label="交易类型:">
            <el-select
              v-model="backendData.dtlData.trascType"
              :placeholder="backendData.dtlData.trascType"
              style="width: auto"
              :disabled="property.disableTrascType"
            >
              <el-option label="收入" value="收入" />
              <el-option label="支出" value="支出" />
            </el-select>
          </el-form-item>
          <el-form-item label="事件:">
            <el-input
              type="textarea"
              v-model="backendData.dtlData.event"
              :value="backendData.dtlData.event"
              style="width: auto"
              :disabled="property.disableEvent"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名:">
            <el-input
              v-model="backendData.dtlData.name"
              :value="backendData.dtlData.name"
              style="width: auto"
              :disabled="property.disableName"
            />
          </el-form-item>
          <el-form-item label="金额:">
            <el-input
              v-model="backendData.dtlData.money"
              :value="backendData.dtlData.money"
              style="width: auto"
              :disabled="property.disableMoney"
            />
          </el-form-item>
          <el-form-item label="交易时间:">
            <el-input
              v-model="backendData.dtlData.trascTm"
              :value="backendData.dtlData.trascTm"
              style="width: auto"
              :disabled="true"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="updBoxSwitch = false">取消</el-button>
        <el-button type="primary" @click="reqUpdateTrasc">{{
          property.button
        }}</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 分页 -->
  <el-pagination
    background
    layout="total, prev, pager, next, jumper"
    :page-count="Math.floor((this.backendData.dataCount + 9) / 10)"
    :total="this.backendData.dataCount"
    v-model:current-page="frontendData.currentPage"
    @current-change="handleCurrentChange"
  />
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      frontendData: {
        queryData: {
          name: "",
          trascType: "",
          trascTm: "",
        },
        addData: {
          name: "",
          trascType: "",
          money: "",
          event: "",
        },
        currentPage: 1,
      },
      backendData: {
        listData: null,
        dtlData: {
          name: "",
          trascFlowNum: "",
          trascType: "",
          money: "",
          event: "",
          trascTm: "",
        },
        dataCount: null,
      },
      addBoxSwitch: false,
      updBoxSwitch: false,
      property: {
        button: "编辑",
        dialogTitle: "交易明细",
        disableName: true,
        disableTrascType: true,
        disableMoney: true,
        disableEvent: true,
      },
    };
  },
  mounted() {
    this.reqGetTrascList();
  },
  watch: {
    addBoxSwitch(value) {
      if (value == false) {
        this.resetAddInput();
      }
    },
    updBoxSwitch(value) {
      if (value == false) {
        this.resetDtlStatus();
      }
    },
  },
  methods: {
    reqAddTrasc() {
      axios
        .post("/api/addTrasc", {
          name: this.frontendData.addData.name,
          trascType: this.frontendData.addData.trascType,
          money: this.frontendData.addData.money,
          event: this.frontendData.addData.event,
        })
        .then((res) => {
          var data = JSON.parse(JSON.stringify(res.data));
          if (data.error == "true") {
            this.showMsg(data.message, "error");
          } else {
            this.showMsg("新增成功", "success");
            this.addBoxSwitch = false;
          }
        });
    },
    reqGetTrascList() {
      var trascTime = this.frontendData.queryData.trascTm;
      var startTime;
      var endTime;
      if (trascTime instanceof Array) {
        startTime = trascTime[0];
        endTime = trascTime[1];
      } else {
        startTime = "";
        endTime = "";
      }
      axios
        .post("/api/getTrascList", {
          name: this.frontendData.queryData.name,
          trascType: this.frontendData.queryData.trascType,
          startTm: startTime,
          endTm: endTime,
          pageNum: this.frontendData.currentPage,
        })
        .then(
          (res) => (
            (this.backendData.listData = JSON.parse(
              JSON.stringify(res.data.dataList)
            )),
            (this.backendData.dataCount = JSON.parse(
              JSON.stringify(res.data.dataCount)
            ))
          )
        );
    },
    reqGetTrascDtl(trascFlowNum, name) {
      this.updBoxSwitch = true;
      axios
        .post("/api/getTrascDtl", {
          trascFlowNum: trascFlowNum,
          name: name,
        })
        .then((res) => {
          this.backendData.dtlData = JSON.parse(JSON.stringify(res.data));
        });
    },
    resetInput() {
      this.frontendData.queryData.name = "";
      this.frontendData.queryData.trascType = "";
      this.frontendData.queryData.trascTm = "";
    },
    reqUpdateTrasc() {
      if (this.property.button == "编辑") {
        this.property.button = "确定";
        this.property.dialogTitle = "修改交易明细";
        this.property.disableName = false;
        this.property.disableTrascType = false;
        this.property.disableMoney = false;
        this.property.disableEvent = false;
      } else {
        axios
          .post("/api/updateTrasc", {
            trascFlowNum: this.backendData.dtlData.trascFlowNum,
            name: this.backendData.dtlData.name,
            trascType: this.backendData.dtlData.trascType,
            money: this.backendData.dtlData.money,
            event: this.backendData.dtlData.event,
          })
          .then((res) => {
            var data = JSON.parse(JSON.stringify(res.data));
            if (data.error == "true") {
              this.showMsg(data.message, "error");
            } else {
              this.showMsg("修改成功", "success");
              this.updBoxSwitch = false;
            }
          });
      }
    },
    reqDeleteTrasc(trascFlowNum) {
      this.$confirm("确认删除该交易明细？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        axios
          .post("/api/deleteTrasc", {
            trascFlowNum: trascFlowNum,
          })
          .then((res) => {
            var data = JSON.parse(JSON.stringify(res.data));
            if (data.error == "true") {
              this.showMsg(data.message, "error");
            } else {
              this.showMsg("删除成功", "success");
            }
          });
      });
    },
    resetAddInput() {
      this.frontendData.addData.name = "";
      this.frontendData.addData.trascType = "";
      this.frontendData.addData.money = "";
      this.frontendData.addData.event = "";
    },
    resetDtlStatus() {
      this.property.button = "编辑";
      this.property.dialogTitle = "交易明细";
      this.property.disableName = true;
      this.property.disableTrascType = true;
      this.property.disableMoney = true;
      this.property.disableEvent = true;
    },
    showMsg(msg, type) {
      ElMessage({
        showClose: false,
        message: msg,
        type: type,
      });
    },
    handleCurrentChange() {
      this.reqGetTrascList();
    },
  },
};
</script>

<style scoped>
.el-descriptions {
  margin-bottom: 30px;
}
.el-pagination {
  margin-top: 20px;
}
</style>
